<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    /*  1 导航 */
    .nav {
      display: flex;
      justify-content: space-between;
      align-items: center;
      /* background-color: red; */
    }

    .nav img {
      width: 30px;
    }

    .nav a {
      color: #49cdd5;
      text-decoration: none;
    }

    /* 2 大图片 */
    .banner {
      /* background-color: salmon; */
      /* text-align: center; */
      display: flex;
      justify-content: center;
      margin: 30px 0 20px;
    }

    .banner img {
      width: 80%;
      /* display: block;
      margin: 0 auto; */
    }

    /* 3 小标题 */
    .js-title {
      /* background-color: red; */
      /* 设置文字居中 */
      text-align: center;
    }

    .js-title span {
      color: #45B3CB;
    }


    /* 4 菜单 */
    .list {
      margin: 0 10px;
      margin-top: 40px;
    }

    .list .menu {
      display: flex;
      margin-bottom: 20px;
      /* align-items: center; */
      border-top: 1px solid #ccc;
      padding-top: 20px;
    }

    .list .menu .menu-left {
      width: 50px;
      height: 50px;
      margin-right: 5px;
    }

    .list .menu .menu-col {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      /* height: 100%; */
    }

    .list .menu .menu-col h4 {}

    .list .menu .menu-col p {}

    .list .menu .menu-right {
      width: 20px;
      height: 20px;
      align-self: center;
    }
  </style>
</head>

<body>
  <!-- 1 导航 -->
  <!-- .nav -->
  <div class="nav">
    <img src="./assets/arrow-left.png" alt="">
    <h2>极速问诊</h2>
    <a href="">问诊记录</a>
  </div>
  <!-- 2 大图片 -->
  <div class="banner">
    <img src="./assets/consult-fast.png" alt="">
  </div>
  <!-- 3 小标题 -->
  <h3 class="js-title">
    <span>20s</span>
    快速匹配专业医生
  </h3>
  <!-- 4 菜单 -->
  <div class="list">
    <!-- 4.1 菜单 -->
    <div class="menu">
      <img class="menu-left" src="./assets/doctor.png" alt="">
      <div class="menu-col">
        <h4>三甲图文问诊</h4>
        <p>三甲主治意义上医生</p>
      </div>
      <img class="menu-right" src="./assets/arrow-right.png" alt="">
    </div>
    <!-- 4.1 菜单 -->
    <div class="menu">
      <img class="menu-left" src="./assets/doctor.png" alt="">
      <div class="menu-col">
        <h4>三甲图文问诊</h4>
        <p>三甲主治意义上医生</p>
      </div>
      <img class="menu-right" src="./assets/arrow-right.png" alt="">
    </div>
    <!-- 4.1 菜单 -->
    <div class="menu">
      <img class="menu-left" src="./assets/doctor.png" alt="">
      <div class="menu-col">
        <h4>三甲图文问诊</h4>
        <p>三甲主治意义上医生</p>
      </div>
      <img class="menu-right" src="./assets/arrow-right.png" alt="">
    </div>
  </div>
</body>

</html>